<script lang="ts" setup>
import { ref, h, onBeforeMount, nextTick, reactive } from "vue";
import {
  VxeFormPropTypes,
  VxeFormInstance,
  VxeModalInstance,
  VxeFormProps
} from "vxe-pc-ui";
import { taxSourcesList,listMerchantName,invoiceList,templateAdd,templateDetail } from '@/api/project/project'
const emits = defineEmits<{ (e: "reload"): void }>();
let taxSourcesId = Number(sessionStorage.getItem("taxSourcesId"));
let merchantsInfoId = Number(sessionStorage.getItem("merchantsInfoId"));
import { ElMessage } from "element-plus";
const vxeModalRef = ref<VxeModalInstance>();

const modalOptions = reactive<{
  modalValue: boolean;
  modalTitle: string;
  canSubmit: boolean;
}>({
  modalValue: false,
  modalTitle: "",
  canSubmit: true
});

const showModal = (title: string, canSubmit?: boolean): void => {
  modalOptions.modalTitle = title;
  modalOptions.modalValue = true;
  modalOptions.canSubmit = canSubmit ?? true;
};
const defaultFormData = () => {
  return {
    merchantsInfoId: merchantsInfoId,
    taxSourcesId: taxSourcesId,
    invoiceTypeIdList: [],
    mainBusiness: '',
    projectName: '',
    projectContent: '',
    projectSettlementRules: '按项目成果付费',
    projectLocation: '',
    contactName: '',
    contactMobile: '',
    templateNumber: '',
    remark: ''
  };
};
// 筛选相关
const formRef = ref<VxeFormInstance>();
interface FormDataVO {
  merchantsInfoId: number | string;//商户
  taxSourcesId: string | number;//关联税源地
  mainBusiness: string;//主营业务
  invoiceTypeIdList: any[];//开票类目
  projectName: string;//项目名称
  projectContent: string;//项目内容
  projectSettlementRules: string;//费用规则
  projectLocation: string;//项目地点
  contactName: string;//联系人
  templateNumber: string;//模板编号
  contactMobile: string;//联系电话
  remark: string;
}

const formOptions = reactive<VxeFormProps<FormDataVO>>({
  data: {
    merchantsInfoId: '',
    taxSourcesId: '',
    invoiceTypeIdList: [],
    mainBusiness:'',
    projectName: '',
    projectContent: '',
    projectSettlementRules: '按项目成果付费',
    projectLocation: '',
    contactName: '',
    contactMobile: '',
    templateNumber: '',
    remark: '',
    auditStateDisplay:''
  },
  items: [
    {
    field: "mainBusiness",
    title: "主营业务",
    span: 24,
    itemRender: {},
    slots: { default: "mainBusiness" }
    },
    {
      field: "projectName",
      title: "模板名称",
      span: 24,
      itemRender: {},
      slots: { default: "projectName" }
    },
    {
      field: "projectContent",
      title: "项目内容",
      span: 24,
      itemRender: {},
      slots: { default: "projectContent" }
    },
    {
      field: "invoiceTypeIdList",
      title: "开票类目",
      span: 24,
      itemRender: {},
      slots: { default: "invoiceTypeIdList" }
    },
    {
      field: "projectSettlementRules",
      title: "费用规则",
      span: 24,
      itemRender: {},
      slots: { default: "projectSettlementRules" }
    },
    {
      field: "projectLocation",
      title: "项目地点",
      span: 24,
      itemRender: {},
      slots: { default: "projectLocation" }
    },
    {
      field: "contactName",
      title: "联系人",
      span: 24,
      itemRender: {},
      slots: { default: "contactName" }
    },
    {
      field: "contactMobile",
      title: "联系方式",
      span: 24,
      itemRender: {},
      slots: { default: "contactMobile" }
    },
    {
    field: "remark",
    title: "备注",
    span: 24,
    itemRender: { },
     slots: { default: "remark" }
  },
  {
    title: "审核状态",
    field: "auditStateDisplay",
    align: "center",
    minWidth: 100,
    itemRender: { },
    slots: { default: "auditStateDisplay" }
  },
  ]
});
const formRules = ref<VxeFormPropTypes.Rules>({
  merchantsInfoId: [{ required: true, message: "请选择商户",trigger: 'change' }],
  taxSourcesId: [{ required: true, message: "请选择税源地",trigger: 'change' }],
  invoiceTypeIdList: [{ required: true, message: "请选择开票类目",trigger: 'change' }],
  mainBusiness: [{ required: true, message: "请输入主营业务" }],
  projectName: [{ required: true, message: "请输入项目名称",trigger: 'change' }],
  projectContent: [{ required: true, message: "请输入项目内容",trigger: 'change' }],
  projectSettlementRules: [{ required: true, message: "请输入费用规则",trigger: 'change' }],
  projectLocation: [{ required: true, message: "请输入项目地点",trigger: 'change' }],
});

const showAddModal = () => {
  showModal(`新增模板`);
  formOptions.data = defaultFormData();
  nextTick(() => {
    formRef.value.clearValidate();
  });
};
const showEditModal = (record: Recordable) => {
  showModal(`编辑开票类目`);
  nextTick(() => {
    formRef.value.clearValidate();
    templateDetail(record.id).then(res => {
      for (let key in formOptions.data) {
          if(res.data[key] === undefined || res.data[key] === null ){

          } else {
            formOptions.data[key] = res.data[key]
          }
      }
      setTimeout(()=>{getinvoiceList()},200)
    })
    
  });
};
const showViewModal = (record: Recordable) => {
  showModal(`查看详情`,false);
  nextTick(() => {
    formRef.value.clearValidate();
    templateDetail(record.id).then(res => {
      for (let key in formOptions.data) {
          if(res.data[key] === undefined || res.data[key] === null ){

          } else {
            formOptions.data[key] = res.data[key]
          }
      }
      setTimeout(()=>{getinvoiceList()},200)
    })
  });
}
const handleSubmit = async () => {
  const validate = await formRef.value.validate();
  if (!validate) {
    
    if (formOptions.data.id) {
      templateAdd(formOptions.data).then(() => {
        modalOptions.modalValue = false;
        emits("reload");
        ElMessage.success(res.msg);
      })
    } else {
      templateAdd(formOptions.data).then(() => {
        modalOptions.modalValue = false;
        emits("reload");
        ElMessage.success(res.msg);
      });
    }
  }
};

const allList = ref<any[]>()
const getalllist = ()=>{
  taxSourcesList({merchantsInfoId: formOptions.data.merchantsInfoId}).then(res=>{
    allList.value = res?.data?.rows;
  })
}
const merchantList = ref<any[]>()
const getmerchantList = ()=>{
  listMerchantName().then(res=>{
    merchantList.value = res?.data?.rows;
  })
}
const iList = ref<any[]>()
const getinvoiceList = ()=>{
  invoiceList({ state: 1, taxSourcesId: formOptions.data.taxSourcesId }).then(res => {
    
    iList.value = res?.data?.rows;
    console.log(iList.value)
  })
}
onBeforeMount(() => {
  getalllist();
  getmerchantList();
});
defineExpose({ showAddModal,showEditModal,showViewModal });
</script>
<template>
  <vxe-modal
    ref="vxeModalRef"
    v-model="modalOptions.modalValue"
    width="800"
    showFooter
    :title="modalOptions.modalTitle"
  >
    <template #default>
      <vxe-form
        ref="formRef"
        :titleWidth="120"
        :titleAlign="`right`"
        :rules="formRules"
        v-bind="formOptions"
      >
      <template #mainBusiness="{ data }">
          <el-input
            clearable
            :disabled="modalOptions.canSubmit ? false : true"
            type="textarea"
            maxlength="100"
            show-word-limit
            placeholder="请输入主营业务名称"
            v-model="data.mainBusiness"
          ></el-input>
        </template>
       
        <template #projectName="{ data }">
          <el-input
            clearable
            :disabled="modalOptions.canSubmit ? false : true"
            type="textarea"
            maxlength="100"
            show-word-limit
            placeholder="请输入项目名称"
            v-model="data.projectName"
          ></el-input>
        </template>
        <template #projectContent="{ data }">
          <el-input
            clearable
            :disabled="modalOptions.canSubmit ? false : true"
            type="textarea"
            maxlength="150"
            show-word-limit
            placeholder="请输入项目内容"
            v-model="data.projectContent"
          ></el-input>
        </template>
         <template #invoiceTypeIdList="{ data }">
          <el-select
            clearable
            placeholder="请选择开票类目"
            v-model="data.invoiceTypeIdList"
            multiple
            :disabled="modalOptions.canSubmit ? false : true"
          >
            <el-option
              v-for="(item, index) in iList"
              :key="index"
              :label="item.categoryOfInvoice"
              :value="item.id"
            ></el-option>
          </el-select>
        </template>
        <template #projectSettlementRules="{ data }">
          <el-input
            clearable
            disabled
            placeholder="请输入费用规则"
            v-model="data.projectSettlementRules"
          ></el-input>
        </template>
        <template #projectLocation="{ data }">
          <el-input
            clearable
            :disabled="modalOptions.canSubmit ? false : true"
            placeholder="请输入项目地点"
            v-model="data.projectLocation"
          ></el-input>
        </template>
        <template #contactName="{ data }">
          <el-input
            clearable
            :disabled="modalOptions.canSubmit ? false : true"
            placeholder="请输入联系人"
            v-model="data.contactName"
          ></el-input>
        </template>
        <template #contactMobile="{ data }">
          <el-input
            clearable
            :disabled="modalOptions.canSubmit ? false : true"
            placeholder="请输入联系方式"
            v-model="data.contactMobile"
          ></el-input>
        </template>
        <template #remark="{ data }">
          <el-input
            clearable
            :disabled="modalOptions.canSubmit ? false : true"
            placeholder="请输入备注信息"
            v-model="data.remark"
          ></el-input>
        </template>
        <template #auditStateDisplay="{ data }" v-if="modalOptions.canSubmit == false">
          <div>{{data.auditStateDisplay}}</div>
        </template>
      </vxe-form>
    </template>
    <template #footer>
      <vxe-button content="关闭" @click="modalOptions.modalValue = false" />
      <vxe-button
        v-if="modalOptions.canSubmit"
        status="primary"
        content="确定"
        @click="handleSubmit"
      />
    </template>
  </vxe-modal>
</template>
<style>
.img_one{
  position: relative;
}
.icon-check{
  position: absolute;
  width: 100%;height: 100%;
  left: 0;
  top: 0;
  line-height: 48px;
  text-align: center;
}



.avatar-uploader .el-upload {
  border: 1px dashed #eee;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: #eee;
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 138px;
  height: 138px;
  text-align: center;
}
.avatar {
  width: 138px;
  height: 138px;
}
</style>